<!--腾讯地图回显 
1、在index.html页面引入腾讯地图key：<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=PU5BZ-NNMKZ-PGLXI-ZJUUJ-FWZ62-7GBV4"></script>
-->
<template>
	<div class="contact">
		<div id="container"></div>
	</div>
</template>

<script>
	export default {
		props: {
			markersite: {
				type: Array,
				default: []
			},
		},
		data(){
			return {
				
			}
		},
		mounted(){
			setTimeout(()=>{
				this.initmap();
			},300)
		},
		methods:{
			initmap() {
				let that = this;
				let markersiteone = this.markersite[0];
				var center = new qq.maps.LatLng(markersiteone.latitude, markersiteone.longitude);
				var map = new qq.maps.Map(document.getElementById('container'), {
					center: center,
					zoom: 13
				});
				var marker;
				that.markersite.forEach((item) => {
					marker = new qq.maps.Marker({
						position: new qq.maps.LatLng(item.latitude, item.longitude),
						map: map
					});
					qq.maps.event.addListener(marker,'click',(event)=>{
						// let lonlat = event.latLng;
						that.$emit('clicksite',event);
					})
				});
				
			}
		}
	}
</script>

<style scoped lang="less">
	#container{
		width: 100%;
		height: 80vh;
		min-height:600px;
		text-align: left;
	}
</style>